<template>
  <el-dialog
    witdh="60%"
    title="选择用例"
    :close-on-click-modal="false"
    :visible="showDialog"
    @close="clickClose"
  >
    <div>
      <wlTreeSelect
        width="240"
        :data="treeData"
        @change="hindleChanged"
        v-model="selected"
        placeholder="请选择用例目录"
        :defaultExpandAll="treeEx"
      ></wlTreeSelect>

      <el-table
        :data="apidata"
        style="width: 100%"
        stripe
        border
        highlight-current-row
        @selection-change="ahandleCurrentChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="序号" width="70"></el-table-column>
        <el-table-column
          prop="name"
          label="用例名称"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="apimethod"
          label="接口类型"
          width="100"
        ></el-table-column>
        <el-table-column prop="api" label="接口路径" width :show-overflow-tooltip="true"></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </div>

    <div class="btn">
      <el-button type="primary" @click="subMit">确认</el-button>
      <el-button @click="clickClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getApicat, getCase } from "@/network/networks";

export default {
  data() {
    return {
      showDialog: false,
      value: [], // 选中值
      treeData: [],
      selected: [""], // 树下拉框选中数据
      apidata: [],
      data: {},
      node: {
        nodeid: 0,
        level: 0,
      },

      treeEx: false,  //目录树展开控制
      inputstr: "",
      //page分页
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
    };
  },

  created() {
    this.getCategory();
  },

  methods: {
    hindleChanged(val) {
      this.node.nodeid = val[0].id;
      this.node.level = val[0].level;
      this.currentPage = 1;
      this.getCase();
    },

    // 获取接口分类
    getCategory() {
      getApicat({
        cat_type: 1,
      }).then((res) => {
        this.treeData = res.data;
      });
    },

    getCase() {
      var redata = {};
      redata.nodeid = this.node.nodeid;
      redata.level = this.node.level;
      redata.currentPage = this.currentPage;
      redata.pageSize = this.pageSize;
      redata.inputstr = this.inputstr;
      getCase(redata).then((res) => {
        this.apidata = res.data.cases;
        this.totalCount = res.data.totalCount;
      });
    },

    ahandleCurrentChange(val) {
      this.data = val;
    },

     //设置每页多少条
     handleSizeChange(val) {
        this.pageSize=val
        this.currentPage=1
        this.getCase()
      },

      //切换页数据
      handleCurrentChange(val) {
        this.currentPage=val
        this.getCase()
      },

    subMit() {
      if (this.data.length != 0) {
        this.$parent.setCaselist(this.data);
        this.clickClose();
      } else {
        this.$message.info("请选择接口");
      }
    },

    clickClose() {
      this.apidata = [];
      this.showDialog = false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}

.btn {
  margin-top: 20px;
  margin-left: 50px;
}
</style>